<script setup lang="ts">
import saveBlob from "save-blob"
import {getLatestTxn} from '~/api'
import moment from 'moment'

const router = useRouter()

const lastTxn = ref(localStorage.getItem('lastTxn') || '')
const latestTxnOnChain = ref(null as any)

const go = (path: string) => {
  router.push(path)
}

const downloadKS = () => {
  const data = localStorage.getItem('keystore') as string
  const fileBlob = new Blob([data], {"type" : "text/plain"})
  saveBlob(fileBlob, "keystore.json")
}
const downloadDD = () => {
  const data = localStorage.getItem('deposit_data') as string
  const fileBlob = new Blob([data], { "type": "text/plain" })
  saveBlob(fileBlob, "deposit_data.json")
}

const clear = () => {
  localStorage.removeItem('lastTxn')
  history.go(0)
}

onMounted(async () => {
  const res = await getLatestTxn()
  latestTxnOnChain.value = res  
})

const short = (addr: string) => {
  if(!addr) return ''
  return addr.slice(0, 6) + '...' + addr.slice(addr.length-4, addr.length)
}

const LaDepositer = computed(() => {
  if (!latestTxnOnChain) return ''
  return latestTxnOnChain.value.latestTxn.address.address
})
const LaDepositerDisp = computed(() => {
  if (!latestTxnOnChain) return ''
  return short(latestTxnOnChain.value.latestTxn.address.address)
})
const LaChain = computed(() => {
  if (!latestTxnOnChain) return ''
  return latestTxnOnChain.value.address
})

const LaChainDisp = computed(() => {
  if (!latestTxnOnChain) return ''
  return latestTxnOnChain.value.name
})

const LaTime = computed(() => {
  if (!latestTxnOnChain) return ''
  return latestTxnOnChain.value.latestTxn.block.height
})

const LaTimeDisp = computed(() => {
  if (!latestTxnOnChain) return ''
  const utcTimeStr = latestTxnOnChain.value.latestTxn.block.timestamp.time
  const date = new Date(`${utcTimeStr} UTC`)
  // 2022-03-14 09:36:20
  return moment(date).format('YYYY-MM-DD HH:mm:ss')
})

</script>

<template>
  <div class="home">
    <div class="card">
      <div class="sub">Latest Deposit</div>
      <div v-if="!latestTxnOnChain">Loading...</div>
      <div v-else>
        <a class="blue" :href="'https://goerli.etherscan.io/address/' + LaDepositer">{{ LaDepositerDisp }}</a>
        <span class="mx-1">depsoit on</span>
        <a class="blue" :href="'https://goerli.etherscan.io/address/' + LaChain">{{ LaChainDisp }}</a>
        <span class="mx-1">at</span>
        <a class="blue" :href="'https://goerli.etherscan.io/block/' + LaTime">{{ LaTimeDisp }}</a>
        
      </div>
    </div>
    <div class="card mb-3">
      <div class="title">Goerli Eth2.0 Deposit</div>
      <div class="mb-2">Become a validator and help secure the future of Ethereum. Earn continuous rewards for providing a public good to the community.</div>
      <div class="mb-2">This page will help you to deposit your eth from goerli to eth2.0 networks what is important before you become a validator so you can play an active part in Ethereum's future. Validators are key to the more secure, scalable, and sustainable Ethereum we're building together.</div>
      <div class="mb-2">As a validator, you'll be responsible for securing the network and receive continuous payouts for actions that help the network reach consensus.</div>
      <div class="mb-2">Today, you'll secure the Beacon Chain, the first main scaling upgrade. It's a separate chain that uses a proof-of-stake consensus mechanism. Eventually you'll help secure all of Ethereum, once mainnet (the Ethereum we use today) merges with the Beacon Chain.</div>
      <div class="mb-2">Validating in Ethereum is not the same as mining. The outcomes are similar: the work you do will extend and secure the chain. But the process is completely different because they use different consensus mechanisms.</div>
      <div>What <b>we</b> do for you:</div>
      <ol class="list">
        <li>1. Generate a mnemonic for you if you don't have one</li>
        <li>2. Generate keystore what is used by you validator</li>
        <li>3. Generate deposit infomation so that you can directly connect you wallet and send transaction.</li>
      </ol>

      <br>
      <div>What <b>you</b> need to do:</div>
      <ol class="list">
        <li>1. Record/Download important things during the process</li>
        <li>2. 32eth in your wallet</li>
        <li>3. Connect your wallet when you need to send transaction</li>
      </ol>
      <div class="my-2 blue">
        <a href="https://twitter.com/Gail23842912">You can follow me on twitter for more help.</a>
      </div>
      <div class="btn-in-card mt-5" @click="go('/chain')" v-show="!lastTxn">Start</div>
    </div>
    <div class="card" v-show="lastTxn">
      <div>You have a submitted transaction.</div>
      <div><a class="blue" :href="`https://goerli.etherscan.io/tx/${lastTxn}`">View on etherscan</a></div>
      <div class="blue">Download <span @click="downloadKS">Keystore</span> / <span @click="downloadDD">Deposit Data</span></div>
      <br>

      <div style="color: green;" @click="clear">Start Another Deposit</div>
    </div>
  </div>
</template>

<style scoped>
.home {
  padding: 15px;
}


.list {
  margin-left: 15px;
}

</style>
